<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <!-- 
        // A JavaScript library for building user interface
        // all in js = 关注点分离
        // 1 htmlcssjs=>2 html css js =>3 component （template style script）=?component:jsx (html css 都写成js形式)
        // Learn Once, Write Anywhere
        // react : react =>react-dom web / react-native app / react vr / electron + react
     -->
   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="./js/react.development.js"></script>
   <script src="./js/react-dom.development.js"></script>
   <script src="./js/babel.min.js"></script>


   <!-- babel 解析jsx 语法=>浏览器能识别的代码 -->
    <script type="text/babel">
        // 03 :jsx =>js扩展语法(js + xml(类似html)) 
        // jsx =>element 元素 ：react app 最小单元=>component>components=>applcation
        var e = <div><h1>helloworld</h1></div>

        //jsx=>元素 = 普通 js对象 = 名称：虚拟DOM
        console.log(e);

        // 03 ReactDOM : 把虚拟Dom 渲染真实DOM容器里面
        // 优化算法 
        ReactDOM.render(e,document.getElementById('app'))
    </script>
</body>
</html>